<template>
    <div class="article">
        <el-row>
            <el-col :span="5" :offset="19">
                <el-button type="primary" icon="plus" @click="addArticle()">新增文章</el-button>
             </el-col>
        </el-row>
        <div class="divline"></div>

        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 99%" align='center'>
             <el-table-column type="expand">
                <template scope="props">  
                 <el-row >
                    <p class="p-expanded-title">文章标题: <span class="span-expanded-content">{{props.row.title}} </span> </p>                    
                    <p class="p-expanded-title">正文内容: </p>
                    <p class="divline-top"></p>
                    <p v-html="props.row.html"></p>
                    <p class="divline-bottom"></p>
                    <p class="p-expanded-title">文章作者: <span class="span-expanded-content">{{props.row.author}} </span> </p>
                    <p class="p-expanded-title">文章创建时间: <span class="span-expanded-content">{{props.row.createdAt.replace('.000Z','').replace('T',' ')}} </span> </p>
                    <p class="p-expanded-title">文章最后修改时间: <span class="span-expanded-content">{{props.row.updatedAt.replace('.000Z','').replace('T',' ')}}</span></p>
                    <p class="p-expanded-title">文章备注: <span class="span-expanded-content">{{props.row.remark}} </span> </p>
                    <p class="p-expanded-title">点赞数: <span class="span-expanded-content">{{props.row.likes}} </span> </p>
                    <p class="p-expanded-title">查看数: <span class="span-expanded-content">{{props.row.watches}} </span> </p>
                    <p class="p-expanded-title">评论数: <span class="span-expanded-content">{{props.row.comments}} </span> </p>

                 </el-row>
                </template>
            </el-table-column>
            <el-table-column
                :prop="title.info.prop"
                :sortable="title.info.sortable"
                :label="title.info.label"
                :align="title.style.align"
                :width="title.style.width">
            </el-table-column>
            <el-table-column
                :prop="remark.info.prop"
                :sortable="remark.info.sortable"
                :label="remark.info.label"
                :align="remark.style.align"
                :width="remark.style.width">
            </el-table-column>

            <el-table-column
                :prop="status.info.prop"
                :sortable="status.info.sortable"
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :formatter="formatterStatu"
                :filters="status.filter.list"
                :filter-method="filterStatu"
                :filter-multiple="status.filter.multiple">
            </el-table-column>

            <el-table-column
                :prop="type.info.prop"
                :sortable="type.info.sortable"
                :label="type.info.label"
                :align="type.style.align"
                :width="type.style.width"
                :formatter="formatterType"
                :filters="type.filter.list"
                :filter-method="filterType"
                :filter-multiple="type.filter.multiple">
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-checkbox style="margin-left:10px" v-model="scope.row.checked" @change='onCheckedChange((scope.row))'>启用</el-checkbox>
                    <el-button type="danger" icon='delete' size="mini" @click='onDeleteArticle(scope.row,scope.$index)'></el-button>
                    <el-button type="info"  size="mini" @click='onMoveTop(scope.row,scope.$index)'>置顶</el-button>
                    <el-button type="info"  size="mini" @click='updatedArticle(scope.row)'>修改</el-button>
                </template>
            </el-table-column>
            
        </el-table>
    </div>
</template>

<script>
    import ArticleJs from './Article.js';
    module.exports = ArticleJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }   
  .divline-top {
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }    
  .divline-bottom {
    margin-top: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .p-expanded-title {
    color:#000;
  }
  .span-expanded-content {
    margin-left:10px;
    margin-right:30px;
    color:#777;
  }
</style>
